<script setup lang="ts">
import { ref, reactive } from 'vue'
import {Button, showNotify } from 'vant'
import EImageList from '@/components/EImageList.vue'
import { enregisterMateriel, queryClassForRegulation } from '@/api/Base/product'

definePage({
  name: 'newProduct',
  meta: {
    level: 2,
    title: '新建物料',
  },
})

// Image list
const photoList = reactive([])

// Form data
const form = ref({
  controlLevel: 1, // 1专用, 2一般受控
  materialType: 1, // 1原料, 2半成品, 3成品
  modelName: '', // 产品型号名称
  specModel: '', // 规格型号
  package: '', // 封装
  productClass: null // 产品分类
})

// Validation rules
const validateForm = () => {
  if (!form.value.modelName.trim()) {
    showNotify({ type: 'danger', message: '请输入产品型号名称' })
    return false
  }
  if (!form.value.specModel.trim()) {
    showNotify({ type: 'danger', message: '请输入规格型号' })
    return false
  }
  if (!form.value.package.trim()) {
    showNotify({ type: 'danger', message: '请输入封装信息' })
    return false
  }
  return true
}
const packageShow = ref(false)
const packageOptions = ref([])
const create = () => {
  if (!validateForm()) return
  
  // TODO: Implement API call
  enregisterMateriel({
    "sProductClass": JSON.stringify(form.value.productClass.map((item: any) => item.label)),
    "sProductPublicClass": JSON.stringify([form.value.package]),
    "sProductName": form.value.modelName,
    "sPhotoUrl": JSON.stringify(photoList),
    "nControlLevel": form.value.controlLevel,
    "nProductType": form.value.materialType,
  }).then(res => {
    if (res.code === 0) {
      showNotify({ type: 'success', message: '创建成功' })
    } else {
      showNotify({ type: 'danger', message: res.msg })
    }
  })
  // console.log('Creating product:', form.value)
  // showNotify({ type: 'success', message: '创建成功' })
}

const resetForm = () => {
  form.value = {
    controlLevel: 1,
    materialType: 1,
    modelName: '',
    specModel: '',
    package: '',
    productClass: null
  }
}
</script>

<template>
  <div class="mt-[40px] mb-[80px]">
    <div class="p-4">
      <!-- 物料图片 -->
      <div class="mb-6">
        <div class="font-medium mb-2">物料图片</div>
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <EImageList v-model:photoList="photoList" />
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="mb-6">
        <div class="font-medium mb-2">基本信息</div>
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <van-cell-group>
            <!-- 受控级别 -->
            <van-cell center title="受控级别" label="选择物料受控级别">
              <template #value>
                <van-radio-group v-model="form.controlLevel" direction="horizontal">
                  <van-radio name="1">专用</van-radio>
                  <van-radio name="2">一般受控</van-radio>
                </van-radio-group>
              </template>
            </van-cell>

            <!-- 物料标识 -->
            <van-cell center title="物料标识" label="选择物料类型">
              <template #value>
                <van-radio-group v-model="form.materialType" direction="horizontal">
                  <van-radio name="1" class="mr-4">原料</van-radio>
                  <van-radio name="2" class="mr-4">半成品</van-radio>
                  <van-radio name="3">成品</van-radio>
                </van-radio-group>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>

      <!-- 详细信息 -->
      <div class="mb-6">
        <div class="font-medium mb-2">详细信息</div>
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <van-cell-group>
            <!-- 产品型号名称 -->
            <van-cell
              center
              title="产品型号名称"
              :value="form.modelName"
              label="输入产品型号名称"
            />
            <van-field
              v-model="form.modelName"
              label=""
              placeholder="请输入产品型号名称"
              class="mb-4"
            />

            <!-- 规格型号 -->
            <van-cell
              center
              title="规格型号"
              :value="form.specModel"
              label="输入规格型号"
            />
            <van-field
              v-model="form.specModel"
              label=""
              placeholder="请输入规格型号"
              class="mb-4"
            />

            <!-- 封装 -->
            <!-- <van-cell
              center
              title="封装"
              :value="form.package"
              label="输入封装信息"
            />
            <van-field
              v-model="form.package"
              label=""
              placeholder="请输入封装信息"
              class="mb-4"
            /> -->
          </van-cell-group>
        </div>
      </div>

     
      {{ form.package }}
      <!-- Component Selector -->
       <!-- {{ form.productClass }} -->
      <ComponentSelector v-model:productClass="form.productClass" :levels="5" />
      <van-field
        :model-value="form.package"
        label="封装选择"
        placeholder="请选择"
        readonly
        @click="()=>{
          packageShow = true
          queryClassForRegulation({
            regulationID: form.productClass[0].id
          }).then(res => {
            if (res.code === 0) {
              packageOptions = res.data
            }
          })
        }"
      />
      <van-popup v-model:show="packageShow" position="bottom">
        <van-picker
          :columns="packageOptions.map(item => ({ text: item.label, value: item.id }))"
          @confirm="({ selectedOptions }) =>{
            form.package = selectedOptions[0].text;
            packageShow = false
          }"
          @cancel="() => {
           packageShow = false
          }"
        />
      </van-popup>
      <!-- 封装选择 -->
    
    </div>

   
  </div>
  <StepBottom>
      <template #default>
        <div class="flex gap-4 px-4">
          <Button 
            round 
            color="#235EFF" 
            class="flex-1 p-10 shadow-md"
            @click="create"
          >
            新建物料
          </Button>
          <Button 
            round 
            plain
            class="flex-1 p-10 shadow-md"
            @click="resetForm"
          >
            重置
          </Button>
        </div>
      </template>
  </StepBottom>
</template>

<style lang="less" scoped>
.van-cell {
  margin-bottom: 16px;
  padding: 12px 16px;
}

.van-radio {
  margin-right: 16px;
}

.van-field {
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 12px;
}

.van-field__control {
  padding: 12px;
}
</style>
